<template>
  <div class="container">
    <el-card class="subject_container">
      <!-- 第一行 -->
      <el-form
        :inline="true"
        :model="page"
        class="demo-form-inline"
        ref="onForm"
      >
        <!-- 学科跳转显示 -->
        <el-row class="xianshi" v-if="subjectID">
          <span> 学科管理 </span>
          <i class="el-icon-arrow-right"></i>
          <span> {{ subjectID }} </span>
          <i class="el-icon-arrow-right"></i>
          <span> 目录管理 </span>
        </el-row>
        <!-- 学科跳转显示 -->
        <!-- 目录名称 -->
        <el-row :gutter="20" style="margin-left: 10px">
          <el-col :span="7">
            <el-form-item label="目录名称">
              <el-input v-model="page.directoryName"></el-input>
            </el-form-item>
          </el-col>
          <!-- 目录名称 -->
          <!-- 状态加按钮 -->
          <el-col :span="10">
            <el-form-item label="状态 ">
              <el-select v-model="page.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="onClear" size="small">清除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="onSearch(page.directoryName, page.state)"
                size="small"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
          <!-- 状态加按钮 -->
          <!-- 新增目录 -->
          <el-col
            :span="6"
            :push="1"
            style="text-align: right; padding-right: 0"
          >
            <el-form-item>
              <!-- 学科跳转显示 -->
              <el-button
                type="text"
                icon="el-icon-back"
                v-if="subjectID"
                @click="$router.go(-1)"
                >返回学科</el-button
              >
              <!-- 学科跳转显示 -->
              <el-button
                type="success"
                @click="onSubmit"
                size="small"
                icon="el-icon-edit"
                >新增目录</el-button
              >
            </el-form-item>
          </el-col>
          <!-- 新增目录 -->
        </el-row>
      </el-form>
      <!--/ 第一行 -->
      <!-- 提示数据数量 -->
      <el-alert
        :title="`数据一共${counts}条`"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 15px"
      >
      </el-alert>
      <!-- 提示数据数量 -->
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="147">
        </el-table-column>
        <el-table-column prop="directoryName" label="目录名称" width="147">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="147">
        </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | filterTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量" width="147">
        </el-table-column>
        <el-table-column prop="state" label="状态" width="147">
          <template slot-scope="scope">
            <span>{{ scope.row.state > 0 ? "已启用" : "已禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" width="147">
          <template slot-scope="scope">
            <el-button type="text" @click="change(scope.row)">{{
              scope.row.state > 0 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              @click="modify(scope.row)"
              :disabled="scope.row.state > 0"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="del(scope.row)"
              :disabled="scope.row.state > 0"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格type="flex" justify="center" align="middle" style="height: 60px" -->
      <!-- 分页 -->
      <el-row class="block" style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.page"
          :page-size="page.pagesize"
          :page-sizes="[5, 10, 20, 40]"
          layout="prev, pager, next, sizes, jumper"
          :total="counts"
        >
        </el-pagination>
      </el-row>
      <!-- 分页 -->
      <!-- 弹层   show显示 tableData数据-->
      <DirectoryAdd
        ref="directoryAdd"
        :title="title"
        :show.sync="show"
        :subjects="subjects"
        @getDirectorytList="getDirectorytList(page)"
      ></DirectoryAdd>
    </el-card>
  </div>
</template>

<script>
// 导入获取目录列表接口 启用禁用状态接口 学科简单列表接口 删除目录接口
import { getDirectorytList, getChange, getSubjects, delDetail } from '@/api/hmmm/directorys'
// 导入dayjs处理时间
import dayjs from 'dayjs'
// 消息提示
import { Message } from 'element-ui'
// 弹层组件
import DirectoryAdd from '@/module-hmmm/components/directorys-add.vue'
export default {
  name: 'Directory',
  data () {
    return {
      counts: 1, // 数据总数
      tableData: [], // 数据数组
      page: { // 分页配置项
        page: 1,
        pagesize: 5,
        subjectID: null,
        directoryName: null,
        state: null
      },
      show: false, // 控制弹层显示
      subjects: [], // 弹层下拉框数据
      title: 0, // 弹层标题 0 增加 1 修改
      subjectID: false // 点击学科分类传过来得值
    }
  },
  components: {
    // 弹层组件
    DirectoryAdd
  },
  watch: {
    '$route.query.subjectID': {
      handler () {
        // console.log(this.$route.query.subjectID)
        // 把目录显示到顶层
        if (this.$route.query.subjectID) {
          this.subjectID = this.$route.query.subjectID.subjectName
          this.page.subjectID = this.$route.query.subjectID.id
          this.getDirectorytList()
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
  },
  created () {
    // 拿数据渲染页面
    this.getDirectorytList()
  },
  methods: {
    // 清除
    onClear () {
      // console.log(this.$refs.onForm)
      this.page.directoryName = null
      this.page.state = null
    },
    // 搜索
    onSearch (a, b) {
      this.getDirectorytList({ ...this.page, directoryName: a, state: b })
    },
    // 点击新增触发
    async onSubmit () {
      // 显示弹层
      this.show = true
      // 获取学科列表
      const { data } = await getSubjects()
      this.subjects = data
      // 标题显示
      this.title = 0
      // console.log(data)
    },
    // 获取目录列表总数据渲染页面
    async getDirectorytList () {
      try {
        const { data } = await getDirectorytList(this.page)
        // console.log(data)
        this.counts = data.counts // 总数
        // data.items.filters
        this.tableData = data.items
      } catch (err) {
        Message.error(err)
      }
    },
    // 每页条数改变触发
    handleSizeChange (val) {
      // 第一页
      this.page.page = 1
      // 每页变成多少条
      this.page.pagesize = val
      // 拿数据
      this.getDirectorytList()
    },
    // 页码数改变触发
    handleCurrentChange (val) {
      // 当前页码数
      this.page.page = val
      // 拿数据
      this.getDirectorytList()
    },
    // 启用禁用事件
    async change (obj) {
      try {
        if (obj.state === 0) {
          obj.state = 1
        } else {
          obj.state = 0
        }
        await getChange({ id: obj.id, state: obj.state })
        Message.success('操作成功')
        // 拿数据
        // this.getDirectorytList()
      } catch (err) {
        console.log(err)
      }
    },
    // 修改
    async modify (obj) {
      // 显示弹出层
      this.show = true
      // 获取学科列表
      const { data } = await getSubjects(obj.subjectName)
      this.subjects = data
      // console.log(obj)
      // 触发子组件
      this.$refs.directoryAdd.getDetail(obj)
      // 标题显示
      this.title = 1
    },
    // 删除事件
    del (obj) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // 发请求删除
          await delDetail(obj)
          // 重新拉数据渲染页面
          await this.getDirectorytList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } catch (err) {
          console.log(err)
        }
      })
    }
  },
  filters: {
    // 处理时间
    filterTime (time) {
      return dayjs(time).format('YYYY-MM-DD hh:mm:ss')
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 10px;
}
.block {
  margin-top: 20px;
}
.xianshi {
  font-size: 14px;
  padding: 16px 20px;
  padding-top: 0;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
  margin-left: -20px;
}
// .el-card {
//   margin: 10px 10px;
// }
</style>
